<template>
	<view class="">
		<view class="tab flex justify-around padding-tb">
			<view 
				v-for="(item,index) in tabArr"  
				:class="index==tabIdx?'':'text-gray'"
				@click="handleTab(index)"
			> 
				{{item.name}}
			</view>
		</view>
		<view class="flex flex-wrap padding-sm justify-between">
			<goods-item v-for="item in cakeList" :good-data="item"/>
		</view>
		<cart-pop v-if="popShow"/>
	</view>
</template>

<script>
import { cakeGet } from '../../api/cake';
import {mapState} from 'vuex'
	export default {
		data() {
			return {
				cakeList:[],
				page:0,
				tabArr:[
					{name:'蛋糕',bcid:1},
					{name:'面包',bcid:11},
					{name:'小食',bcid:6},
					{name:'配件',bcid:5},
				],
				tabIdx:0,
				bcid:1 //记录被点击菜单的分类bcid
			};
		},
		computed: {
			...mapState({
				popShow:state=>state.cart.popShow
			})
		},
		methods:{
			handleTab(idx){
				this.tabIdx = idx
				this.bcid = this.tabArr[idx].bcid
				this.page = 0
				this.cakeList = []
				this.fetchData()
			},
			fetchData(){
				cakeGet(this.page,this.bcid).then(res=>{
					uni.stopPullDownRefresh() //关闭下拉刷新动画
					let {results} = res.data
					if(results.length){
						this.cakeList = [
							...this.cakeList,
							...results
						]
						this.page++
						return
					}
					uni.showToast({
						title:"没有更多数据了",
						icon:"none"
					})
				})
			}
		},
		async onLoad() {
			let res = await cakeGet()
			this.cakeList = res.data.results
			this.page++
		},
		onReachBottom() {
			console.log("触底了");
			this.fetchData()
		},
		onPullDownRefresh() {
			this.page = 0
			this.cakeList = []
			this.fetchData()
		}
	}
</script>

<style lang="scss">
.tab view{
	position: relative;
	width: 25%;
	text-align: center;
	&::after{
		content: '';
		height: 30upx;
		width: 1upx;
		background-color: red;
		position: absolute;
		right: 0;
		top: 50%;
		transform:scaleX(0.5) translateY(-50%);
	}
	:last-child::after{
		width: 0;
	}
}
</style>
